<template>
    <div class="accountLogin">

        <!--账号-->
        <div class="account">
            <Input type="text"
                   v-model="account"
                   placeholder="请输入手机号/邮箱"
                   size="large"
                   clearable
                   @on-blur="checkAccount"
                   prefix="ios-contact-outline"/>
        </div>
        <div class="tip">
            {{accountTip}}
        </div>

        <!--密码-->
        <div class="pwd">
            <Input type="password"
                   v-model="password"
                   placeholder="请输入密码"
                   size="large"
                   clearable
                   password
                   @on-blur="checkPwd"
                   prefix="ios-lock-outline"
                   @on-enter="enter"/>
        </div>
        <div class="tip">
            {{pwdTip}}
        </div>

        <!--记住密码 忘记密码-->
        <div class="pwd-box">
            <div class="left">
                <Checkbox v-model="keepPwd">记住密码</Checkbox>
            </div>
            <div class="right" @click="forgetPwd">
                忘记密码?
            </div>
        </div>

        <!--登录按钮-->
        <div class="btn-box">
            <Button type="success"
                    size="large"
                    html-type="button"
                    style="width: 100%"
                    @click="login">
                登录
            </Button>
        </div>

        <!--去注册-->
        <div class="reg-box">
            <div class="reg" @click="intoRegister">去注册 ></div>
        </div>
    </div>
</template>

<script>
    import {checkIsEmail, checkIsIphoneNo, checkStrIsNull} from "@/tools/check";
    import * as Base64 from "js-base64";
    import {setCookie} from "@/tools/cookie";

    export default {
        name: "",
        components: {},
        data() {
            return {
                account: "",
                password: "",
                //账号提示
                accountTip: "",
                //密码提示
                pwdTip: "",
                //记住密码
                keepPwd: true
            }
        },
        methods: {
            checkAccount: function () {
                this.accountTip = ""
                let b = checkStrIsNull(this.account);
                if (b) {
                    this.accountTip = "账号不能为空"
                } else {
                    let b2 = checkIsIphoneNo(this.account);
                    let b3 = checkIsEmail(this.account);
                    if (!b2 && !b3) {
                        this.accountTip = "账号格式错误"
                    }
                }
            },
            checkPwd: function () {
                this.pwdTip = ""
                let b1 = checkStrIsNull(this.password);
                if (b1) {
                    this.pwdTip = "密码不能为空"
                }
            },
            //登录前校验
            check: function () {
                let flag = true
                //校验账号
                let b = checkStrIsNull(this.account);
                if (b) {
                    this.accountTip = "账号不能为空"
                    flag = false
                } else {
                    let b2 = checkIsIphoneNo(this.account);
                    let b3 = checkIsEmail(this.account);
                    if (!b2 && !b3) {
                        this.accountTip = "账号格式错误"
                    }
                }
                let b1 = checkStrIsNull(this.password);
                if (b1) {
                    this.pwdTip = "密码不能为空"
                    flag = false
                }
                return flag
            },
            //Enter
            enter: function () {
                this.login()
            },
            //登录
            login: function () {
                this.accountTip = ""
                this.pwdTip = ""
                let b = this.check();
                if (!b) {
                    return
                }
                let data = {
                    account: this.account,
                    /**
                     * Base64.encode("需要加密字符串")
                     * Base64.decode("需要解密字符串")
                     * this.Md5("需要加密的字符串")   Md5 不能解密
                     */
                    po: Base64.encode(this.password),
                    pc: this.Md5(this.password)
                }
                this.axios.post(`/login/login/user`, data)
                    .then((data) => {
                        //参数异常
                        if (data.code == 50001) {
                            this.$Message.error({
                                background: true,
                                duration: 2,
                                content: '参数异常'
                            });
                        }
                        //账号格式错误
                        if (data.code == 20003) {
                            this.$Message.error({
                                background: true,
                                duration: 2,
                                content: '账号格式错误'
                            });
                            this.accountTip = "非法手机号/邮箱"
                        }
                        //账号未注册
                        if (data.code == 20002) {
                            this.$Message.warning({
                                background: true,
                                duration: 2,
                                content: '该账号未注册'
                            });
                            this.accountTip = "该账号未注册"
                        }
                        //用户名或者密码错误
                        if (data.code == 20010) {
                            this.accountTip = "用户名或者密码错误"
                            this.pwdTip = "用户名或者密码错误"
                        }
                        //正确返回
                        if (data.code == 200) {
                            let token = data.data.token;
                            let webUser = data.data.webUser;

                            //将后台的数据前端本地化，后台修改字段，前台只要修改这里即可
                            let user = {
                                userId: webUser.webUserId,
                                userName: webUser.userName,
                                iphoneNo: webUser.iphoneNo,
                                userEmail: webUser.userEmail,
                                headPortrait: webUser.headPortrait,
                                vip:webUser.vip
                            }

                            //将用户对象信息 字符串化
                            let userInfo = JSON.stringify(user);
                            //存到本地
                            window.sessionStorage.setItem("isLogin", true);
                            window.sessionStorage.setItem("token", token);
                            window.sessionStorage.setItem("userInfo", userInfo);

                            //如果记住密码，保存到cookie
                            if (this.keepPwd) {
                                setCookie("isLogin", true);
                                setCookie("token", token);
                                setCookie("userInfo", userInfo);
                            }

                            //存到Vuex
                            this.$store.dispatch("updateId", user.userId);
                            this.$store.dispatch("updateIsLogin", true);
                            this.$store.dispatch("updateToken", token);
                            this.$store.dispatch("updateUserInfo", user);

                            //跳转到首页
                            this.$router.push("/");
                        }
                    })
            },
            //点击忘记密码
            forgetPwd: function () {
                this.$router.push("/forgetPwd");
            },
            //点击去注册
            intoRegister: function () {
                this.$router.push("/register");
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>

    .accountLogin {
        width: 94%;
        margin: 14px auto 0px;
    }

    .account,
    .pwd {

    }

    /*信息提示*/
    .tip {
        height: 24px;
        color: #FF0000;
        font-size: 14px;
        line-height: 20px;
        padding-left: 8px;
    }

    /*记住密码 忘记密码*/
    .pwd-box {
        overflow: hidden;
    }

    /*记住密码*/
    .pwd-box .left {
        float: left;
    }

    /*忘记密码*/
    .pwd-box .right {
        float: right;
        font-size: 14px;
        color: #555;
        cursor: pointer;
    }

    /*登录按钮*/
    .btn-box {
        margin-top: 10px;
    }

    /*去注册*/
    .reg-box {
        overflow: hidden;
    }

    .reg-box .reg {
        height: 20px;
        width: 66px;
        float: right;
        font-size: 14px;
        line-height: 20px;
        color: #FF0000;
        text-align: right;
        margin: 10px 0px 10px 0px;
        padding-right: 4px;
        cursor: pointer;
    }
</style>